<template>
  <div>
    <div class="heng"></div>
    <div class="topbox">附近商家</div>
    <div
      class="bigbox"
      v-for="(item, index) in arrxuanran"
      :key="index"
      @click="goodList(item)"
    >
      <div class="leftbox">
        <img :src="item.image_path | imgfilter" alt />
      </div>
      <div class="rightbox">
        <div class="shangbox">
          <p class="p1">
            <span class="logo">品牌</span>
            <span class="name">{{ item.category }}</span>
          </p>
          <p class="bao">保准票</p>
        </div>
        <div class="center">
          <p class="p2">
            <Star :num="item.rating"></Star>
            <span class="ping">{{ item.rating }}</span>
            <span class="shou">月售{{ item.recent_order_num }}单</span>
          </p>
          <p class="p3">
            <span class="feng" v-if="item.delivery_mode">{{
              item.delivery_mode.text
            }}</span>
            <span class="zhun" v-if="item.supports[1]">{{
              item.supports[1].name
            }}</span>
          </p>
        </div>
        <div class="bottonbox">
          <p class="p4">
            <span>￥{{ item.float_minimum_order_amount }}/</span>
            <span>配送费约￥{{ item.float_delivery_fee }}</span>
          </p>
          <P class="P5">
            <span class="gong">{{ item.distance }}/</span>
            <span class="time">{{ item.order_lead_time }}</span>
          </P>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Allaxios } from "../../API/index";
import star from "../star/star.vue";
export default {
  components: {
    Star: star,
  },
  data() {
    return {
      arrxuanran: [],
      pageNumber: 0,
      pageSize: 10,
    };
  },
  async mounted() {
    var lati = this.$route.query.lati;
    var long = this.$route.query.long;
    var res = await Allaxios(lati, long, this.pageNumber, this.pageSize);
    this.arrxuanran = this.arrxuanran.concat(res.data);
    window.addEventListener("scroll", async () => {
      if (
        Math.ceil(document.documentElement.scrollTop) + window.innerHeight ==
        document.body.offsetHeight + 77
      ) {
        this.pageNumber += 10;
        var res = await Allaxios(lati, long, this.pageNumber, this.pageSize);
        this.arrxuanran = this.arrxuanran.concat(res.data);
        console.log(this.arrxuanran);
      }
    });
  },
  methods: {
    goodList(item) {
      this.$router.push({ path: "/shopCar", query: { id: item.id } });
    },
  },
};
</script>
<style scoped >
img {
  width: 4.2rem;
}
.P5 {
  display: flex;
  align-items: center;
}
.time {
  color: #3190e8;
  font-size: 10px;
}
.gong {
  font-size: 10px;
}
.bottonbox {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}
.p4 {
  display: flex;
  align-items: center;
  font-size: 12px;
}
.zhun {
  font-size: 12px;
  height: 0.9rem;
  color: #3190e8;
  border: 1px solid #3190e8;
  margin-left: 0.05rem;
  display: flex;
  align-items: center;
}
.feng {
  display: inline-block;
  height: 0.9rem;
  background: #3190e8;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
}
.shou {
  font-size: 12px;
}
.ping {
  font-size: 12px;
  color: #ff6000;
}
.p2 {
  width: 9rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.p2 img {
  width: 0.3rem;
}
.p3 {
  display: flex;
}

.p1 {
  height: 100%;
  display: flex;
  align-items: center;
}
.center {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shangbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 0.6rem;
}
.bao {
  font-size: 12px;
}
.name {
  width: 6rem;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.logo {
  font-size: 0.12rem;
  background: #ffd930;
  height: 0.9rem;
  border-radius: 0.18rem;
  display: inline-block;
  margin-right: 0.2rem;
}
.leftbox {
  float: left;
}
.rightbox {
  height: 100%;
  width: 16.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.bigbox {
  width: 100%;
  height: 6rem;
  display: flex;
  justify-content: space-between;
  padding: 0.3rem 0.2rem;
}
.topbox {
  width: 100%;
  height: 3rem;
  display: flex;
  align-items: center;
  font-size: 0.2rem;
  padding-left: 0.16rem;
  color: #ccc;
}
.topbox img {
  width: 1.2rem;
  vertical-align: middle;
  margin-right: 0.1rem;
}
.heng {
  width: 100%;
  height: 0.9rem;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
  background: #f5f5f5;
  margin-top: 0.2rem;
}
</style>


